<template>
  <div>
        <h1>{{msg}}</h1>
        <div>
            <router-link to="/login">
                login
            </router-link>
            <router-link to="/register">
                register
            </router-link>
            <router-view></router-view>
        </div>
        <mt-button type="danger" @click="showMsg">提示</mt-button>
        <button type="button" class="mui-btn mui-btn-primary" @click="showMsg">蓝色</button>
        <button type="button" class="mui-btn mui-btn-success">绿色</button>
        <button type="button" class="mui-btn mui-btn-warning">黄色</button>
        <button type="button" class="mui-btn mui-btn-danger">红色</button>
        <button type="button" class="mui-btn mui-btn-royal">紫色</button> 
  </div>
</template>

<script type="text/ecmascript-6">
import { Toast} from 'mint-ui';
export default {
  data () {
    return {
        msg:"这是APP组件",
        instance:null
    };
  },
  methods:{
    showMsg(){
      this.instance =Toast({  message: '提示', //提示内容分

      position: 'bottom', //提示框位置
      duration: -1 , //持续时间（毫秒），若为 -1 则不会自动关闭
      iconClass: 'icon icon-success' , //icon 图标的类名
      className:'addClass'   //Toast 的类名。可以为其添加样式
      });
      setTimeout(() => {
        this.instance.close()
      }, 2000)
    }
  },
  created(){

  }
}

</script>
<style lang="stylus" rel="stylesheet/stylus">
</style>